<template>
  <el-dialog :visible.sync="addVisible"  @close="$emit('update:addVisible',false)" width="70%" :show-close='false' class="subMethodDialog" :closeOnClickModal='false'>
    <span slot="title" class="dialog-title">
      设置检测项目
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
    <div class="penalContent">
       <!--<div class="penalrow selectw100">
        检测方法
        <el-input v-model = "methodDetail.methodName" size = "mini"  style = 'width:calc(100% - 90px);margin-left:10px;'></el-input >
      </div>-->
      <el-form label-width="110px" :inline="false" class="demo-form-inline subForm" :model="methodInfo" :rules="methodsRules" ref="methodInfo">
        <el-form-item label="检测方法" prop='methodName'>
          <el-col :span="22">
            <el-input size="mini" placeholder="检测方法" v-model="methodInfo.methodName" :disabled = "newOrEditItem == 'look'"></el-input>

          </el-col>
        </el-form-item>
         <el-form-item label="能力参数" prop='name'>
          <el-col :span="22">
            <el-input size="mini" placeholder="能力参数" v-model="methodInfo.name" :disabled = "newOrEditItem == 'look'"></el-input>

          </el-col>
        </el-form-item>
     </el-form>
      <div class="penalrow selectw100">
        检测项目
        <el-button  style="position:absolute;right:20px;top:0;" type="primary" size="mini" @click="addOne" v-if = "newOrEditItem != 'look'">添加</el-button>
      </div>
      <div style="height:calc(100% - 155px);padding:0 20px;">
        <el-table :data="methodInfo.itemBeanList" style="width: 100%;height:100%;" class="tableCon" size="mini">
          <el-table-column label="序号" min-width="50px" fixed>
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>

          <el-table-column property="itemName" label="检测项目" fixed min-width="120px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.itemName" filterable placeholder="选择检测项目" size="mini" style="width:100%;" value-key = "id" :disabled = "newOrEditItem == 'look'" @change = "changeItem($event,scope.row)">
                <el-option v-for="item in projectData" :key="item.id" :label="item.name" :value="item" :disabled = "item.disabled">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column property="reportWord" label="报告字" fixed min-width="120px">
            <template slot-scope="scope">
              <el-input v-model = "scope.row.reportWord" size = "mini" :disabled = "newOrEditItem == 'look'"></el-input>
              <!--<el-select v-model="scope.row.itemName" filterable placeholder="选择检测项目" size="mini" style="width:100%;" value-key = "id" :disabled = "newOrEditItem == 'look'">
                <el-option v-for="item in projectData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>-->
            </template>
          </el-table-column>
          
          <el-table-column property="unitName" label="单位" min-width="80px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.unitName" filterable placeholder="选择检测项目" size="mini" style="width:100%;" value-key = "code" :disabled = "newOrEditItem == 'look'">
                <el-option v-for="item in allUnit" :key="item.code" :label="item.ename" :value="item">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="是否开启" min-width="100px">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status"  :active-value="1" :inactive-value="0" :disabled = "newOrEditItem == 'look'">
               </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="100px">
            <template slot-scope="scope">
                <el-button type = "text" size="mini" v-on:click="deleteOne(scope.$index)" :disabled = "scope.row.id != undefined && scope.row.id != '' && scope.row.id != null" >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
    <span slot="footer" class="dialog-footer" v-if = "newOrEditItem != 'look'">
			<el-button class="penalButton" type="primary" size="mini" v-on:click="sumbmit" :disabled = "!isRepeat">确定</el-button>
        <el-button class="penalButton" size="mini" v-on:click="close">取消</el-button>
		</span>
  </el-dialog>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    data() {
      return {
        allUnit:[],
        methodInfo:{
          name:"",
          methodName:"",
          itemBeanList:[],
        },
        methodsRules:{
          name: [
            { required: true, type: 'string', message: '请填写能力参数', trigger: 'blur' },
          ],
          methodName: [
            { required: true, type: 'string', message: '请填写检测方法', trigger: 'blur' },
          ],
        },
        isRepeat:true,

        yesornoValue: '1',
        enableStatusValue: '1',
        projectData: [],
        isAdd: true,
        commonData: {
          "materialCode": "WZ2019012400001",
          "materialName": "没有",
          "hashcode": "140060589",
          "batch": "BCK20ML0001",
          "spce": "200ml/瓶",
        },
        zhibiaoTable: [],
        analysisItemTableDateValue: '',
        detectList:[],
      }
    },
    computed: {
      ...mapState(['enableStatus', 'tableHeightA', 'yesorno', 'enableStatus', 'analysisItemTableDate', 'unitTableDate']),
    },
    props: ['addVisible','methodDetail','subcontractorForm','newOrEditItem'],
    created() {
     
      
    },
    watch:{
      addVisible(val){
        if(val){
          this.readItemSet('');
          this.readAllUnit();
          if(this.newOrEditItem == 'edit' || this.newOrEditItem == 'look' ){
            
            this.methodInfo =JSON.parse(JSON.stringify(this.methodDetail));
          }
        }
      }
    },
    methods: {
      close() {
        this.$emit("update:addVisible",false);
        this.methodInfo = {
          name:"",
          methodName:"",
          itemBeanList:[],
        };
        this.isRepeat = true;
      },

      // 读取单位
      readAllUnit(item) {
          this.allUnit = [];
          this.$http({
              method: 'post',
              apiUrl: '/technology/readLabUnitList.htm',
              params: { ename: item },
              isJson: true
          }).then(res => {
              if (res.code == 0) {
                  this.allUnit = res.data;
              }
          })
      },
      addOne() {
        this.methodInfo.itemBeanList.push({
          itemName: {},
          unitName: {},
          reportWord:"",
          status:1,
        })
      },
      deleteOne(index) {
         this.methodInfo.itemBeanList.splice(index, 1)
      },
      readItemSet(item) {
        this.$http({
          method: 'post',
          apiUrl: '/technology/readAllItem.htm',
          params: { name: item },
          isJson: true
        }).then(res => {
          if (res.code === 0) {
            this.projectData = res.data

          }
        }, )
      },
      changeItem(event,row){ //改变检测项目，报告字默认为该检测项的名字
        console.log(event,row);
        
        row.reportWord = event.name;



      },
      sumbmit() {
        this.$refs.methodInfo.validate((valid) => { //表单验证
          if (valid) {
            
             for(var i in this.methodInfo.itemBeanList){
                if(this.methodInfo.itemBeanList[i].itemName.id != undefined){
                  this.methodInfo.itemBeanList[i].item = this.methodInfo.itemBeanList[i].itemName.id;
                  this.methodInfo.itemBeanList[i].itemCode = this.methodInfo.itemBeanList[i].itemName.code;
                  this.methodInfo.itemBeanList[i].itemName = this.methodInfo.itemBeanList[i].itemName.name;
                }
                if(this.methodInfo.itemBeanList[i].unitName.code != undefined){
                  this.methodInfo.itemBeanList[i].unit = this.methodInfo.itemBeanList[i].unitName.code;
                  this.methodInfo.itemBeanList[i].unitName = this.methodInfo.itemBeanList[i].unitName.ename;
                }
                if(JSON.stringify(this.methodInfo.itemBeanList[i].itemName)=='{}' || JSON.stringify(this.methodInfo.itemBeanList[i].unitName)=='{}' || this.methodInfo.itemBeanList[i].reportWord == '' || this.methodInfo.itemBeanList[i].reportWord == undefined || this.methodInfo.itemBeanList[i].reportWord == null) {
                  this.$notify({
                    title:"警告",
                    message:"检测项，报告字和单位为必填项！",
                    type:"warning"
                  })
                  return;
                }
              }
            var params = {
              subcontractor:this.subcontractorForm.id,
              name:this.methodInfo.name,
              methodName:this.methodInfo.methodName,
              itemBeanList:this.methodInfo.itemBeanList,
            }
            if(this.newOrEditItem == "edit"){
              params = this.methodInfo;

            }
            this.isRepeat = false;
            this.$http({
              method: 'post',
              apiUrl: '/resource/addSubconMethod.htm',
              params: params,
              isJson: true,
            }).then(res => {
              this.isRepeat = true;
              if (res.code === 0) {
                  this.$notify({
                    message: '保存成功',
                    type: 'success',
                    title:"保存"
                  });
                  this.close();
                  this.$parent.getSubconMethods();
                }
            })
          }else {
            return false;
          }
        })
        
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .subMethodDialog .el-dialog {
    height: 80%;
    margin-top:10vh !important;
  }
  .subMethodDialog .el-dialog  .el-form-item{
      margin-bottom:16px;
  }
</style>